<template>
    <div id="header">
        <div class="page-header">
            <div class="title">
                <div class="nav">
                    <div class="site">
                        <img
                            src="https://ocr-data.cdn.bailian-ai.com/Picture/logo.png"
                            width="126"
                            height="40px"
                            style="vertical-align:middle"
                        />
                    </div>
                    <ul>
                        <li>
                            <router-link to="/dashboard/pdf2img">PDF转图片</router-link>
                        </li>
                        <li>
                            <router-link to="/dashboard/img2pdf">图片合成PDF</router-link>
                        </li>
                        <!-- <li>
                            <router-link to="/dashboard/imgScale"
                                >图片压缩</router-link
                            >
                        </li>-->
                        <li>
                            <router-link to="/dashboard/pictureReco">图片识别</router-link>
                        </li>
                    </ul>
                </div>
                <div class="user">
                    <el-popover
                        placement="bottom-end"
                        popper-class="loginPopper"
                        width="80"
                        trigger="click"
                    >
                        <div class="loginContent">
                            <ul>
                                <li>
                                    <div class="exit" @click="logout">
                                        <i class="icon-exit"></i>
                                        <span>退出登录</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="exit" @click="update_pwd">
                                        <i class="icon-exit"></i>
                                        <span>修改密码</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div slot="reference">
                            <!-- <i class="icon-default"></i> -->
                            <img src="https://by.cdn1.bailian-ai.com/Image/default.png" width="24" />
                            <span class="username">{{ username }}</span>
                        </div>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "headers",
    props: {},
    data() {
        return {
            username: sessionStorage.getItem("username")
        };
    },
    computed: {},
    components: {},
    mounted() {},
    destroyed() {},
    methods: {
        logout() {
            const url = this.$api.LOGOUT;
            this.$request.get(url).then(res => {
                if (res.code === this.$api.CODE_SUCCESS) {
                    sessionStorage.removeItem("username");
                    this.$router.push("/login");
                }
            });
        },
        update_pwd() {
            this.$router.push("/update_pwd");
        }
    }
};
</script>
<style lang="styl" scoped>
@import "./header.styl";
</style>
